<template>
  <main>
    <vxe-table :align="allAlign" :data="tableData1">
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="sex" title="Sex"></vxe-column>
      <vxe-column field="age" title="Age"></vxe-column>
    </vxe-table>
  </main>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getData } from "@/api/index";
import { ElMessage } from "element-plus";

const allAlign = ref(null);

const tableData1 = ref([
  {
    id: 10001,
    name: "Test1",
    role: "Develop",
    sex: "Man",
    age: 28,
    address: "test abc",
  },
  {
    id: 10002,
    name: "Test2",
    role: "Test",
    sex: "Women",
    age: 22,
    address: "Guangzhou",
  },
  {
    id: 10003,
    name: "Test3",
    role: "PM",
    sex: "Man",
    age: 32,
    address: "Shanghai",
  },
  {
    id: 10004,
    name: "Test4",
    role: "Designer",
    sex: "Women",
    age: 24,
    address: "Shanghai",
  },
]);
const getInfo = async (pageNum: number) => {
  const params = {
    pageNum,
  };

  try {
    const res: any = await getData(params);
    console.log(res);
  } catch (e) {
    console.log(e);
  }
};
getInfo(200);
</script>
